<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>NodoorServe</title>
		<!-- 引入swiper -->
		<link rel="stylesheet" href="js/swiper-2.7.6/swiper.min.css">
		<!-- 引入字体图标 -->
		<link rel="stylesheet" type="text/css" href="js/font-awesome/css/font-awesome.css" />
		<!-- Bootstrap -->
		<link href="js/bootstrap/bootstrap.min.css" rel="stylesheet">
		<!-- 引入全局配置 -->
		<link rel="stylesheet" type="text/css" href="css/start.css">
		<!--引入公共样式-->
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/homepage.css">
		<script type="text/javascript" src="js/common/baseUrl.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
		<script type="text/javascript" src="js/artTemplate/template.js"></script>

	</head>

	<body class="placeOrder">
		<!-- 头部开始 -->
		<div id="header">
			<div class="top">
				<div class="top-left">
					<i class="fa fa-map-marker "></i>
					<a href="javascript:void(0)" class="one">广州</a>
					<a href="javascript:void(0)" class="two">切换城市</a>
				</div>
				<div class="top-right">
					<a class="one">
						<i class="fa fa-user"></i> 朱莉
					</a>
					<a href="javascript:void(0)">退出</a>
					<a href="javascript:void(0)">帮助中心</a>
					<a href="javascript:void(0)">网站导航</a>
					<a href="javascript:void(0)">手机APP</a>
				</div>

			</div>
			<div class="searchBox">
				<div class="search">
					<div class="search-left">
						<h3>互生 <small>商务服务</small></h3>
					</div>
					<div class="search-right">
						<div class="one">
							<input type="text" name="search" id="search" value="输入商家名称、分类或地区" placeholder="输入商家名称、分类或地区" />
							<a href="javascript:void(0)">
								<i class="fa fa-search"></i>
							</a>
						</div>

						<div class="two">
							<a href="#">运动健身</a>
							<a href="#">瑜伽</a>
							<a href="#">羽毛球</a>
							<a href="#">CS</a>
							<a href="#">农家乐</a>
							<a href="#">私人影院</a>
						</div>
					</div>

				</div>

			</div>

		</div>
		<!-- 头部结束 -->
		<div id="goods">
			<script type="text/html" id="test">

				<div class="container">
					<div class="title">
						服务项目
						<div class="total">
							总价
						</div>
						<div class="count">
							数量
						</div>
					</div>
					<div class="product">
						<div class="pic">
							<img src="img/2.png" alt="">
						</div>
						<div class="right">
							<div class="name">
								{{goods.goodsName}}
							</div>
							<div class="icon">
								<div class="iconBox">
									<img src="img/jinbi.png" alt=""> {{goods.hsPrice}}
								</div>
								<div class="iconBox" style="color:#1769a8;margin-left:10px;">
									<img src="img/integral.png" alt=""> {{goods.perPoint}}
								</div>
							</div>
							<div class="icon">
								<div class="refund">
									<img src="img/随时退.png" alt=""> {{goods.refundNotes}}
								</div>
								<!--<div class="refund">
									<img src="img/随时退.png" alt=""> 售出不退
								</div>-->
							</div>
						</div>
						<div class="total">
							<img src="img/jinbi.png" alt=""> {{shuliang*goods.hsPrice}}
						</div>
						<div class="count">
							{{shuliang}}
						</div>
					</div>
					<div class="productDet">
						<div class="name">
							<span style="font-weight:bold;">{{goods.shopName}}</span>
							<span style="color:#a1a1a1;">({{goods.entResno}}) </span>
						</div>
						<div class="adress">
							{{goods.shopAddress}}
							<span style="color:#1c7bd4;margin-left:10px;">	<i class="fa fa-map-marker"></i>查看地图</span>
						</div>

					</div>
					<div class="title">
						预约服务人员
						<span>
       重要提示:服务人员不能提供服务时,可协商变更
			 </span>
					</div>
					<div class="bookPerson">
						{{each staff}}
						<div class="head">
							<img src="img/2.png" alt="">
							<p>{{$value.jobName}}</p>
						</div>
						{{/each}}
					</div>
					<div class="bookTime">
						<span> 服务时间:</span> {{servTime}}
					</div>
				</div>

				<div class="container" style="margin-top:15px;">
					<div class="title">
						商家优惠券
					</div>
					<!--优惠券-->
					<div class="youhuiquan">

						<div class="yhq-two">
							<ul>
								{{each yhq}}
								<li>
									<div class="yhqbox">

										<div class="yhq-left">
											<h4><small>¥ </small>{{$value.couponAmount}}</h4>
											<span>满{{$value.canUseAmount}}元可用</span>
										</div>
										<div class="yhq-right">
											<h4>{{$value.couponName}}</h4>
											<p>使用范围： {{each $value.categoryNames}} {{$value}}&nbsp; {{/each}}
											</p>
											<div>
												<span>{{$value. getStartTime}}-{{$value. useExpireTime}}</span>

											</div>
										</div>
									</div>
								</li>
								{{/each}}
							</ul>
						</div>
					</div>
					<!--优惠券-->
					<div class="title">
						消费抵扣劵
					</div>
					<div class="Consumption">
						<div class="name">
							消费抵扣劵
							<span>(本次可用{{num}}张)</span>
						</div>

						<div class="btnC">
							<button class="btn btn-default minus" type="button" style="border-top-left-radius: 20px;border-bottom-left-radius: 20px;">
			<i class="fa fa-minus" onclick="minusNum()"></i>
		</button>
							<input type="text" class="form-control" value="{{num}}" placeholder="2">
							<button class="btn btn-default plus" type="button" onclick="addNum()" style="border-top-right-radius: 20px;border-bottom-right-radius: 20px;">
					<i class="fa fa-plus"></i>
		</button>
						</div>

						<div class="ticket">
							<img src="img/Coupon.png" alt=""> -{{num*10}}
						</div>
					</div>
					<div class="title">
						填写预留信息
						<!--<span style="float:right;color:#1c7ed6;">选择上门服务地址</span>-->
					</div>
					<div class="bookInfo">
						<table>

							<tr>
								<td>预留手机号:</td>
								<td>
									<input type="text"  class="form-control ml15 w350 myTel" value="" placeholder="填写联系人手机号">
								</td>
							</tr>
							<tr>
								<td>预计到店时间:</td>
								<td>
									<select class="form-control  ml15 w350" value="getTime">
										{{each goods.choiceDayVoList}}
										<option>{{$value.date}}</option>
										{{/each}}
									</select>

								</td>
							</tr>
						</table>

						<div class="" style="color:#f93d24;">
							温馨提示：预计到店时间有变化，可与商家协商变更
						</div>

					</div>
					<div class="consumeDetBox">
						<div class="consumeDet">
							<span>订单金额:</span>
							<img src="img/jinbi.png" alt=""> {{shuliang*goods.hsPrice}}
						</div>
						<div class="consumeDet">
							<span>商家优惠券:</span>
							<img src="img/惠Circle.png" alt=""> --{{selected}}
						</div>
						<div class="consumeDet" style="color:#01a353;">
							<span>消费抵扣劵:</span>
							<img src="img/Coupon.png" alt=""> {{num*10}}
						</div>
						<div class="consumeDet" style="color:#1c7ed4;">
							<span>消费积分:</span>
							<img src="img/integral.png" alt="">{{goods.perPoint}}
						</div>
						<div class="consumeDet" style="font-size:22px;">
							<span>实付金额:</span>  
							<img src="img/jinbi.png" alt=""> {{payMoney}}
							 
						</div>
					</div>
					<div class="btnBoxBottom">
						<button class="btn btn-danger book"   onclick="submit()">提交订单</button>
					</div>
				</div>

			</script>
		</div>

		<!--**********底部开始**********-->
		<div class="foot" id="foot">
			<p>
				<strong>客服热线： </strong>
				<a href="javascript:void(0)">
					0755-83344111
				</a>
				<span class="foot-adition">2013-2018 </span>
				<span>
      深圳市互生电子商务有限公司
    </span>
				<span>
			粤ICP备案号14100052号
			
    </span>
			</p>
		</div>
		<!--**********底部结束**********-->
	</body>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
	<script src="js/common/jquery-1.12.2.js"></script>

	<!-- 引入swiper插件 -->
	<script type="text/javascript" src="js/swiper-2.7.6/swiper.min.js"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="js/bootstrap/bootstrap.min.js"></script>
	<!-- 让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
	<script type="text/javascript" src="js/common/respond.min.js"></script>
	<script type="text/javascript" src="js/common/html5.min.js"></script>
	<script type="text/javascript" src="js/common/common.js"></script>
	<script src="js/common/NoDoorServe.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var mySwiper = new Swiper('.swiper-container', {
			swipeToNext: true,
			pagination: '.pagination',
			paginationClickable: true,
			autoplay: 5000, //可选选项，自动滑动
			loop: true, //可选选项，开启循环

		})
		$('#prve').click(function() {
			mySwiper.swipePrev();
		})
		$('#next').click(function() {
			mySwiper.swipeNext();
		})
	</script>

</html>